<template>
	<view class="content mainpadding">
		<!-- 地址信息 -->
		<view class="mainpadding ffffff border2">
			<view class="flexleft">
				<view class="color_ling text_w margin_right5">{{name}}</view>
				<view class="color_ling text_w">{{phone}}</view>
			</view>
			<input type="text" class="margin_top color_ling text_w" placeholder="請輸入詳細地址" v-model="address" />
		</view>
		<!-- 預約時間 -->
		<view class="margin_top mainpadding ffffff border2">
			<view class="flexbetween">
				<view class="color_ling text_x">預約時間</view>
				<view class="flexleft" @click="show=true">
					<input class="text_a color_six margin_right1 textright" type="text" disabled="" placeholder="請選擇時間"
						v-model="yuetime_text">
					<!-- <view class="text_a color_six margin_right1">請選擇</view> -->
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<!-- 上傳圖片 -->
		<view class="mainpadding ffffff border2 margin_top">
			<view class="color_ling text_x">上傳圖片</view>
			<view class="flexleft flex_wrap ">
				<view class="item_image_box margin_top" v-for="(item,index) in images_text" :key="index">
					<view class="item_image radius">
						<image :src="item" mode=""></image>
						<view class="deletimg" @click="deleimage(index,images,images_text)"></view>
					</view>
				</view>
				<!-- 圖片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(images,images_text,5)" v-if="images.length<5">
					<view class="item_image radius">
						<image src="/static/images/index/noImage.png" mode=""></image>
						<!-- <view class="deletimg"></view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 備注 -->
		<view class="mainpadding ffffff border2 margin_top">
			<view class="color_ling text_x">備注</view>
			<textarea class="margin_top" cols="30" rows="10" placeholder="請輸入備注信息" v-model="content"></textarea>
		</view>
		<view class="footer">
			<view class="footerButton" @click="submit">確定</view>
		</view>
		<u-datetime-picker cancelText="取消" confirmText="確認"  :show="show" v-model="value1" :minDate="value1" mode="datetime" confirmColor="#FFB800"
			@cancel="show=false" @confirm="confirmTime"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				shop_id: "",
				name: "", //姓名
				phone: "", //電話
				address: "", //地址
				yuetime: "", //預約時間
				yuetime_text: "", //預約時間-展示
				images: [], //圖片
				images_text: [], //圖片-展示
				content: "", //備注
				googleKey:""
			}
		},
		async onLoad(options) {
			this.shop_id = options.id
			// this.getDefaultAddress()
			await this.getsystem()
			await this.getlocation()
		},
		onShow() {
			uni.$off("selectAddressFn")
			uni.$on("selectAddressFn", data => {
				console.log(data);
				this.name = data.name
				this.phone = data.phone
				this.address = `${data.addre}/${data.address}`
			})
			this.getuserinfo()
		},
		methods: {
			async getsystem(){
				let res = await this.http.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype:"gooleset",
					type:"google_key"
				})
				this.googleKey = res.data
			},
			getlocation() {
				let that = this
				navigator.geolocation.getCurrentPosition(function(position) {
					let postData = {
						latlng: position.coords.latitude + "," + position.coords.longitude,
						key: that.googleKey
					}
					that.http.request('/api/index/getLocationInfo', 'GET', {
						latlng:postData.latlng,
					}).then(res=>{
						that.address = res.data.results[0].formatted_address
					})
				});
			},
			async getuserinfo() {
				let res = await this.http.request('/api/member/userInfo', 'GET', {})
				this.name = res.data.nickname
				this.phone = res.data.mobile
				uni.setStorageSync("invite_code",res.data.invite_code)
			},
			goAddress() { //地址
				uni.navigateTo({
					url: "/pages_mine/takeAddress?type=1"
				})
			},
			confirmTime(e) { //自取時間、到店時間
				console.log(e.value);
				this.yuetime = this.millisecond(e.value)
				this.yuetime_text = this.secondDate(e.value, 0, 1)
				this.show = false
			},
			deleimage(i, upImg, upImg_arr) { //刪除圖片
				upImg.splice(i, 1)
				upImg_arr.splice(i, 1)
			},
			async submit() { //提交
				if (!this.yuetime) {
					this.http.toast("請選擇預約時間")
					return false
				}
				if (!this.address) {
					this.http.toast("請輸入詳細地址")
					return false
				}
				let res = await this.http.request('/api/Ordercall/addOrdercall', 'POST', {
					shop_id: this.shop_id,
					name: this.name, //姓名
					phone: this.phone, //電話
					address: this.address, //地址
					yuetime: this.yuetime, //預約時間
					images: this.images.join(), //圖片
					content: this.content, //備注
				})
				if(res.code == -1){
					this.http.toast(res.msg)
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages_mine/personInformation"
						})
					},1000)
					return false
				}
				if (res.code == 1) {
					this.http.toast("提交成功")
					setTimeout(() => {
						uni.navigateBack(1)
					}, 500)
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 150rpx;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>